<template>
  <div class="statistics-page">
    <div class="toolbar">
      <div class="total-label">
        总量：<span class="total-num">{{ total }}</span>
      </div>
      <div class="change-bar">
        <el-switch
          v-model="month"
          active-color="#096dd9"
          inactive-color="#08979c"
          inactive-text="当日受理总量"
          active-text="当月受理总量"
        >
        </el-switch>
      </div>
    </div>
    <div class="statistics-wrap" v-loading="loading">
      <div class="chart-wrap" v-if="!loading">
        <gauga
          v-for="(item, i) in list"
          :key="i"
          :axisLineColor="item.axisLineColor"
          :seriesData="item.seriesData"
        ></gauga>
      </div>
    </div>
  </div>
</template>
<script>
import Gauga from "@/components/public/echarts-gauga";
import OrderService from "@/api/order/OrderService.js";
export default {
  name: "",
  components: {
    Gauga,
  },
  data() {
    return {
      loading:false,
      total: 0,
      month: false,
      list: [
        {
          axisLineColor: [1, "#5E30B5"],
          seriesData: [{ name: "需求单量", value: 0 }],
        },
        {
          axisLineColor: [1, "#00A0E8"],
          seriesData: [{ name: "订单量", value: 0 }],
        },
        {
          axisLineColor: [1, "#c41d7f"],
          seriesData: [{ name: "竣工量", value: 0 }],
        },
        {
          axisLineColor: [1, "#FF6100"],
          seriesData: [{ name: "起租量", value: 0 }],
        },
      ],
    };
  },
  watch: {
    month() {
      this.getData();
    },
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      this.loading = true
      const params = {
        queryFlag: this.month ? "1002" : "1001", //'1001:日、1002:月、1003:年； 不传默认日'
        bussFlag: "myOrder",
        staffId: JSON.parse(sessionStorage.getItem("crm3-userinfo")).staffId,
        orgId: JSON.parse(sessionStorage.getItem("crm3-userinfo")).orgId,
      };
      const { code, meta } = await OrderService.qryMyOrderCount(params);
      if (code == 200 && meta.resultObject) {
        const {
          reqOrderCount,
          jgOrderCount,
          orderCount,
          qzOrderCount,
          allOrderCount,
        } = meta.resultObject;
        this.total = allOrderCount;
        this.list = [
          {
            axisLineColor: [1, "#5E30B5"],
            seriesData: [{ name: "需求单量", value: reqOrderCount }],
          },
          {
            axisLineColor: [1, "#00A0E8"],
            seriesData: [{ name: "订单量", value: jgOrderCount }],
          },
          {
            axisLineColor: [1, "#c41d7f"],
            seriesData: [{ name: "竣工量", value: orderCount }],
          },
          {
            axisLineColor: [1, "#FF6100"],
            seriesData: [{ name: "起租量", value: qzOrderCount }],
          },
        ];
      }
      this.loading = false
    },
  },
};
</script>

<style lang="scss" scoped>
.statistics-page {
  background-color: #fff;
  height: 100%;
  margin: 0 -0.12rem;
}
.statistics-wrap{
   height: 200px;
}
.chart-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.page-title {
  font-size: 20px;
  line-height: 50px;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.total-num {
  color: #52c41a;
  font-size: 20px;
}
</style>